<template>
    <div class="card-container zs-layout-flex-row zs-layout-items-center">
        <div class="card zs-space-bottom-bg"
            :class="{ 'zs-space-right': index < props.list.length - 1, 'card-active': curIndex == index }" style=""
            v-for="(item, index) in props.list" :key="index" @click="changeCard(index)">
            <div class="zs-layout-flex-row zs-layout-justify-center zs-layout-items-center">
                <div class="title">{{ item.titleLeft }}</div>
                <div class="line">|</div>
                <div class="title">{{ item.titleRight }}</div>
            </div>
            <div class="split-line"></div>
            <div class="zs-layout-flex-row zs-layout-justify-around  zs-layout-items-center">
                <div class="tip">{{ item.tipLeft }}</div>
                <div class="tip">{{ item.tipRight }}</div>
            </div>
            <div class="num-row zs-layout-flex-row zs-layout-justify-around  zs-layout-items-center">
                <span class="num">
                    <span
                        :class="{ 'zs-text-red': item.numLeftColor == 1, 'zs-text-orange': item.numLeftColor == 2, 'zs-text-green': item.numLeftColor == 3 }">{{
                            item.numLeft }}</span>
                    <span class="num-unit">{{ item.numLeftUnit }}</span>
                </span>
                <div class="num-center">{{ item.numCenter }}</div>
                <span class="num"
                    :class="{ 'zs-text-red': item.numRightColor == 1, 'zs-text-orange': item.numRightColor == 2, 'zs-text-green': item.numRightColor == 3 }">
                    <span>{{ item.numRight }}</span>
                    <span class="num-unit">{{ item.numRightUnit }}</span>
                </span>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref, watch } from 'vue'

// const cardList = ref([
//   { titleLeft: '项目整体', titleRight: '净利润率', tipLeft: '累计标准', tipRight: '累计实际', numLeft: '30.00', numLeftUnit: '%', numLeftColor: '1', numCenter: 'vs', numRight: '30.00', numRightUnit: '%', numRightColor: '1', },
//   { titleLeft: '项目整体', titleRight: '净利润率', tipLeft: '累计标准', tipRight: '累计实际', numLeft: '30.00', numLeftUnit: '%', numLeftColor: '2', numCenter: 'vs', numRight: '30.00', numRightUnit: '%', numRightColor: '2', },
//   { titleLeft: '项目整体', titleRight: '净利润率', tipLeft: '累计标准', tipRight: '累计实际', numLeft: '30.00', numLeftUnit: '%', numLeftColor: '3', numCenter: 'vs', numRight: '30.00', numRightUnit: '%', numRightColor: '3', },
// ])

const props = defineProps({
    // 右侧tab： 1 两算一控 2 财务口径
    list: {
        type: Array,
        required: false,
        default: () => { return [] }
    },
    cardIndex: {
        typeof: Number,
        required: false,
        default: 0,
    }
})
const emit = defineEmits(["onChange"]);

const curIndex = ref(props.cardIndex)

const changeCard = (value) => {
    curIndex.value = value
    emit("onChange", { data: value });
}

watch(() => { props.cardIndex }, () => {
    curIndex.value = props.cardIndex
}, { deep: true });

</script>
  
<style scoped lang="scss">
$numCenterWidth: 20px;

.card-container {
    flex-wrap: wrap;
}

.card {
    min-width: 222px;
    border: 1px solid #eaeaea;
    border-radius: 6px;
    padding: 12px;
    cursor: pointer;
    color: #333333;
    box-sizing: border-box;
    flex-shrink: 0;

    &:hover {
        background: #477AFD;
        color: #ffffff;
        transition: background 0.3s;
    }
}

.card-active {
    background: #477AFD;
    color: #ffffff;
    transition: background 0.3s;
}

.title {
    font-size: 16px;
}

.line {
    margin: 0 6px;
}

.split-line {
    border-bottom: 1px solid #d4d8df;
    margin: 8px 0 12px 0;
}

.tip {
    font-size: 12px;
    width: 50%;
    text-align: center;
}

.num-row {
    margin-top: 12px;
}

.num {
    font-size: 20px;
    font-weight: bold;
    width: calc((100% - $numCenterWidth) / 2);
    text-align: center;
}

.num-unit {
    font-size: 10px;
}

.num-center {
    font-size: 12px;
    width: $numCenterWidth;
    text-align: center;
}
</style>
  